<template>
	<div>
		<!-- Quill 富文本编辑器 -->
		<QuillEditor ref="myQuillEditor" v-model:content="article" theme="bubble" :options="editorOption" contentType="html" />
	</div>
</template>

<script>
	import { watch } from 'vue'
	import { QuillEditor } from '@vueup/vue-quill'
	import { onMounted } from 'vue'
	import { dataRequest as api } from '@/api/api'
	import hljs from 'highlight.js'
	import 'highlight.js/styles/androidstudio.css'

	export default {
		name: 'readOnly',
		props: ['contentid', 'post'],
		components: {
			QuillEditor,
		},
		data() {
			return {
				editorOption: {
					readOnly: true,
					modules: {
						toolbar: null,
						syntax: {
							highlight: text => {
								return hljs.highlightAuto(text).value
							},
						},
					},
				},
				deltaContent: [],
				article: '',
			}
		},
		methods: {
			async get() {
				// 获取文章
				let array = await api(['' + this.post, { id: this.contentid }])
				const data = array.code === 200 ? array.data[0] : null
				if (data) {
					this.deltaContent = data.content
					const quill = this.$refs.myQuillEditor.editor.__quill
					quill.setContents(this.deltaContent)
					this.$parent.Receive_data(data)
					const reg = new RegExp(`<pre`, 'g')
					this.article = this.article.replaceAll(reg, '<pre onclick="copy(event.target)"')
				} else {
					this.$message.error('文章不存在!')
					this.$router.push('/')
				}
			},
			async copy(ele) {
				let str = ele.parentNode.innerText
				const str1 = `//DEXC区块链学院`
				const replaced = str + str1
				await navigator.clipboard.writeText(replaced).then(
					() => {
						this.$message.success('复制成功')
					},
					() => {
						this.$message.error('复制失败！请手动赋值')
					},
				)
			},
		},
		mounted() {
			this.$nextTick(() => {
				this.get()
				window.copy = this.copy
				console.log('加载完成')
			})
		},
		// 监听
		watch: {
			contentid(value) {
				if (value) {
					this.get()
					// 这里拉取这个用户是否点赞 还有这个文章点赞数量
				}
			},
		},
	}
</script>
<style scoped>
	:deep(.ql-container, .ql-snow) {
		font-size: 16px;
		border: 0px;
		cursor: default;
	}

	:deep(.ql-editor) {
		padding: 0;
		cursor: default;
	}
	/* 语法高亮 */
	:deep(.ql-bubble .ql-editor pre) {
		margin: 5px 0 5px;
		position: relative;
		overflow: hidden;
		display: block;
		padding: 30px 8px 2px;
		line-height: 20px;
		word-wrap: break-word;
		text-align: left;
		background: #21252b;
		/* box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%); */
	}

	/** 3个点 */

	:deep(.ql-bubble .ql-editor pre::before) {
		position: absolute;
		word-wrap: break-word;
		top: 10px;
		left: 15px;
		width: 12px;
		height: 12px;
		font-weight: 700;
		font-size: 12px;
		color: rgb(190, 185, 185);
		line-height: 20px;
		white-space: nowrap;
		text-indent: 750px;
		background-color: #fc625d;
		border-radius: 16px;
		box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
		content: '';
	}

	/* 允许操作 */
	:deep(.ql-syntax) {
		-moz-user-select: text;
		-webkit-user-select: text;
		-ms-user-select: text;
		-khtml-user-select: text;
		user-select: text;
		font-size: 13px;
		overflow: hidden;
		outline: none;
		/* 直接隐藏元素超出的部分 */
	}
	:deep(.ql-editor p img) {
		display: block;
		margin: 0 auto;
	}
	@media screen and (max-width: 860px) {
		:deep(.ql-bubble .ql-editor pre) {
			margin: 0.05rem 0 0.05rem;

			padding: 0.3rem 0.08rem 0.02rem;
			line-height: 0.2rem;
			/* box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%); */
		}
		:deep(.ql-bubble .ql-editor pre::before) {
			position: absolute;
			word-wrap: break-word;
			top: 0.1rem;
			left: 0.15rem;
			width: 0.12rem;
			height: 0.12rem;
			font-weight: 700;
			font-size: 0.12rem;
			color: rgb(190, 185, 185);
			line-height: 0.2rem;
			white-space: nowrap;
			text-indent: 3.2rem;
			background-color: #fc625d;
			border-radius: 0.16rem;
			box-shadow: 0.2rem 0 #fdbc40, 40px 0 #35cd4b;
			content: '';
		}

		/* 允许操作 */
		:deep(.ql-syntax) {
			-moz-user-select: text;
			-webkit-user-select: text;
			-ms-user-select: text;
			-khtml-user-select: text;
			user-select: text;
			font-size: 13px;
			overflow: hidden;
			outline: none;
			/* 直接隐藏元素超出的部分 */
		}
	}
</style>
